<template>
  <div id="viewer">
    <el-page-header @back="goBack" content="详情页面">
    </el-page-header>
    <div id="load" v-show="loadshow">
      <div id="load-bar-k">
        <div id="load-bar-x"></div>
      </div>
    </div>

    <div id="controller-y">
      <div id="photo" class="item item-f">
        <img src="../../assets/imgs/photo.png" @click="switchPhoto" alt="照片">
        <div class="point" v-show="pointshow"></div>
      </div>
      <div id="gyro" class="item item-f">
        <img src="../../assets/imgs/gyro.png" @click="switchPhoto" alt="体感">
        <!-- <div class="point" ></div> -->
      </div>
      <div id="funs" class="item item-s">
        <img src="../../assets/imgs/function.png" @click="hidefunction" alt="功能">
      </div>
    </div>

    <div id="photo-box" ref="photobox">
      <div id="photo-box-d">
      </div>
    </div>
    <div id="main" class="main" v-show="isEditMarker">
      <div >
        <el-tabs v-model="currentTabIndex" class="box">
        <el-tab-pane label="添加标注" name="1">
          <el-row>
            <el-col :span="24" class="lables">标题:</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><Input
                  class="Addjump" v-model="markersEditConfig.marker.title" placeholder="请输入标题" type="textarea" /> 
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="lables">描述:</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
                <Input class="Addjump" v-model="markersEditConfig.marker.description" placeholder="请输入描述" type="textarea" :rows="4" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="lables">添加附件</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span style="margin-left:16px; margin-top: 10px;">
                <Radio-group class="Addjump" v-model="markersEditConfig.marker.attachment.type" @on-change="handleChange" >
                  <Radio label="img">图片</Radio>
                  <!-- <Radio label="video">视频</Radio> -->
                  <Radio label="link">链接</Radio>
                </Radio-group>
              </span>
            </el-col>
          </el-row>
          <el-row v-show="imgshow">
            <el-col :span="24">
              <div style="margin-left: 20px;">
                <div class="demo-upload-list" v-for="item in uploadList" :key="item.url">
                  <img :src="item.url" />
                  <div class="demo-upload-list-cover">
                    <Icon
                      type="ios-eye-outline"
                      @click.native="handleView(item.url)"
                    ></Icon>

                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemove(item)"
                    ></Icon>
                  </div>
                </div>
                <Upload
                  ref="upload" class="Addjump"
                  :show-upload-list="true"
                  :format="['jpg', 'jpeg', 'png']"
                  :before-upload="handleBeforeUpload"
                  multiple
                  type="drag"
                  action=""
                  style="display: inline-block;width:58px;"
                >
                  <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
                
                <!-- <Button :loading="confirmLoad" style="background-color:#1890ff;color: #fff" @click="upload">
                  上传
                </Button> -->
              </div>
              <!-- <span style="margin-left:16px; margin-top: 10px;">
                <Upload class="Addjump" ref="upload" :show-upload-list="true"
                    :format="['jpg', 'jpeg', 'png']"
                    :before-upload="handleBeforeUpload"
                    multiple
                    type="drag"
                    action=""
                    style="display: inline-block;width:58px;"
                  >
                  <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
                <Button :loading="confirmLoad" style="background-color:#1890ff;color: #fff" @click="upload">
                上传
              </Button>
              </span> -->
            </el-col>
          </el-row>
          <el-row v-show="linkshow" style="margin-left:16px; margin-top: 10px;">
            <el-col :span="24" >
              <Input class="Addjump" v-model="markersEditConfig.marker.attachment.link" placeholder="请输入链接" type="text"  />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="添加跳转" name="2" style="height: 60%;">
          <el-row>
            <el-col :span="12" class="lablesInput
                      ">当前场景:</el-col>
            <el-col :span="12" class="lablesInput">{{ scenesNowName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="lablesInput">角度:</el-col>
            <!--  v-model="form.scenesRato"-->
            <el-col :span="20" class="lablesInput">
              <div class="Addjumpbig">
                <div class="chi-div"><Button type="primary" shape="circle" size="small" @click="jiaodu(-90)">-90°</Button></div>
                <div class="chi-div"><Button type="primary" shape="circle" size="small" @click="jiaodu(-45)">-45°</Button></div>
                <div class="chi-div"><Button type="primary" shape="circle" size="small" @click="jiaodu(0)">0°</Button></div>
                <div class="chi-div"><Button type="primary" shape="circle" size="small" @click="jiaodu(45)">45°</Button></div>
                <div class="chi-div"><Button type="primary" shape="circle" size="small" @click="jiaodu(90)">90°</Button></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="lablesInput">跳转至场景:</el-col>
            <el-col :span="16" class="lablesInput" style="margin-bottom:200px">

              <Select v-model="markersEditConfig.jump.targetSceneId" class="Addjump">
                <Option v-for="item in itemArr" :key="item.id" :label="item.name" :value="item.id" >
                </Option>
              </Select>
            </el-col>
          </el-row>
        </el-tab-pane>

      </el-tabs>
      </div>
      <div class="maindiv">
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle  @click="updateMarker()"></el-button>
      </div>
    </div>

  </div>
</template>
<script>
import Index from '../h5/index'
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/plugins/markers.css";
export default {
  components: { Index },
  data() {
    return {
      switchGyroStatus: false,
      switchPhotoStatus: false,
      hidefunctionStatus: false,
      controllerLock: false,
      isCollapse: true,
      photoBoxLock: false,
      isEditMarker:false,
      loadshow: false,
      pointshow: true,
      imgshow:true,
      linkshow:false,
      currentTabIndex: '1',
      scenesNowName:"",
      angle:0,
      confirmLoad:false,
      markersEditConfig:{
        marker:{
          attachment:{
            type:"img"
          },
          title:"",
          description:"",
        },
        jump: {
            angle: '0°',
            targetSceneId: '' // 目标场景id
          }
      },
      form: {
        scenesName: '',
        scenesRato: '',
        scenesSelect: ''
      },
      // defaultList: [
      //   {
      //     'name': 'a42bdcc1178e62b4694c830f028db5c0',
      //     'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
      //   },
      //   {
      //     'name': 'bc7521e033abdd1e92222d733590f104',
      //     'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
      //   }
      // ],
      imgName: '',
      visible: false,
      uploadList: [],
      viewer: "",
      textarea: "",
      markersPlugin: "",
      itemArr: [
        // {
        //   name: "house0",
        //   img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ebbea0343bf44d2aabab3dc58aa4c3a~tplv-k3u1fbpfcp-watermark.awebp",
        // },
        // {
        //   id:1,
        //   name: "house1",
        //   // img: require('@/assets/imgs/demo/demo1.jpeg'),
        //   img: "https://api.boss.i-town.cn/Upload/Tables/Sys_Dictionary/202304051810041696/sun.jpg",
        // },
        {
          id:2,
          name: "house2",
          img: "http://localhost:9991//Upload/Tables/Sys_Dictionary/202304051810041696/sun.jpg",
        },
        {
          id:3,
          name: "house3",
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40135df7df034eb5a76daa76f26fe046~tplv-k3u1fbpfcp-watermark.awebp",
        },
      ],
      currentDataMark: [],
      // 数据配置，每个图片中存在几个可点击的标记，tooltip对应的是图片名称
      dataMark: {
      },
    };
  },
  mounted() {
    this.loadVR();
    let self = this;
    //模板参数传参
    const _this = this
    window.setViewers = function (channelNum) {
      //console.log("点击图片",channelNum)
      _this.setViewer(channelNum);
    }
  },
  methods: {
    loadVR(){
      let id=this.$route.params.id;
      console.log("vrid",id)
      this.http.get('/api/VR/getvr?vrid='+id)
      .then(x=>{
          console.log('this.http.ipAddress',this.http.ipAddress);
          console.log('/api/VR/getvr',x)
          this.itemArr=[];
          x.data.forEach(element => {
            element.img=this.http.ipAddress+element.img;
           // element.img="https://api.boss.i-town.cn/"+element.img;
            this.itemArr.push(element)
          });
          this.switchPhotoPoint();
          this.setViewer(this.itemArr[0].img);
      })
    },
    handleChange(val) {
    console.log(val)
      if(val==='img'){
        this.imgshow=true;
        this.linkshow=false;
      }else{
        this.imgshow=false;
        this.linkshow=true;
      }
    },
    jiaodu(angle) {
      this.angle=angle;
    },
    /**
     *  方法作用:  预览图片
     **/
    handleView(url) {
      this.imgUrl = url;
      this.visible = true;
    },
    /**
     *  方法作用:  去除上传文件
     **/
    handleRemove(file) {
      this.uploadList.splice(this.uploadList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      // 因为上传过程为实例，这里模拟添加 url
      file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
      file.name = '7eb99afb9d5f317c912f08b5212fd69a';
    },
    handleFormatError(file) {
      this.$Message.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      });
    },
    handleMaxSize(file) {
      this.$Message.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      });
    },
     /**
     *  方法作用:  获取上传文件
     **/
    handleBeforeUpload(file) {
      file.url = this.convertSrc(file);
      if(this.uploadList.length>=5){
        this.$Message.warning({
          title: '最多只能上传 5 张图片。'
        });
      }
      let segmentation= file.name.split(".");
      if (
        segmentation[segmentation.length - 1] == "png" ||
        segmentation[segmentation.length - 1] == "jpg" ||
        segmentation[segmentation.length - 1] == "jpeg"
      ) {
        this.uploadList.push(file);
        this.upload();
      } else {
        this.$Message.info(`上传类型只能是jpg,jpeg,png`);
        return;
      }
      // false代表不上传到action的地址，只能手动上传，true 代表根据action地址  自动上传
      return false;
    },
    /**
     *  方法作用:  上传
     **/
     upload() {
     let that = this;
      if (that.uploadList.length == 0) {
        that.$Message.error("上传文件不能为空");
        return;
      }
      //按钮加载
      this.confirmLoad = true;
      let formData = new FormData();
      for (let i = 0; i < that.uploadList.length; i++) {
        formData.append("fileInput", that.uploadList[i]);
      }
      console.log("提交图片");
      //防止多次點擊
      // if (this.onceUpload) {
       // this.onceUpload = false;
        //调用上传接口，上传图片
        this.http
        .post("/api/Dictionary/upload", formData, "正在上传文件" )
        .then(x=>{
            console.log("上传图片",x)
        })
        // this.$api
        //   .uploadFile(formData)
        //   .then(res => {
        //     if (res.code === 200) {
        //       this.$Message.success("上传成功");
        //     } else {
        //       this.$Message.warning(res.message);
        //     }
        //     this.confirmLoad = false;
        //     that.uploadList = [];
        //     this.onceUpload = true;
        //   })
        //   .catch(err => {
        //     this.confirmLoad = false;
        //     this.onceUpload = true;
        //   });
      //}
    },
    /**
     *  方法作用:  转换成SRC显示在页面上
     **/
     convertSrc(file) {
      return window.URL.createObjectURL(file);
    },
    refreshData(val) {
      console.log(val);
    },
    goBack() {
      console.log('go back');
    },
    setViewer(panorama) {
      const jumpConfig = this.itemArr.find(
          (item) => item.img === panorama
        )
      this.scenesNowName=jumpConfig.name
      if (this.viewer)
        try {
          this.viewer.destroy();
        } catch (e) {
          console.log(e);
          const viewer = document.querySelector("#viewer");
          viewer.removeChild(viewer.childNodes[0]);
        }
      this.viewer = new Viewer({
        container: document.querySelector("#viewer"),
        panorama: panorama,
        size: {
          width: "100vw",
          height: "100vh",
        },
        navbar: false,
        plugins: [
          [
            MarkersPlugin,
            {
              markers: this.currentDataMark,
            },
          ],
        ],
        // navbar: [
        //   {
        //     hidden: false,
        //   },
        // ],
      });
      this.viewer.once("ready", () => {
        this.controllerLock = true;
        //自动旋转
        this.viewer.startAutorotate();
        this.cratePhoneBox();
        this.photoBoxLock = true;
      });
      // this.viewer.on('position-updated', (e, position) => {
      //   console.log({ e })
      //   console.log({ position })
      //   // 全景图位置变化时 也就是旋转时会把显示的标注tooltip内容隐藏 这里停止旋转时 让这部分标注tooltip重新展示
      //   // config.tooltip?.visible是手动添加的变量 用来判断标注的tooltip是否显示
      //   if (this.markersPlugin && this.markersPlugin.markers && this.currentMarkerId) setTimeout(() => {
      //     Object.keys(this.markersPlugin.markers).forEach((id) => {
      //       if (this.markersPlugin.markers[id].config.tooltip.visible) this.markersPlugin.markers[id]['showTooltip']()
      //     })
      //   }, 300)
      // });
      this.markersPlugin = this.viewer.getPlugin(MarkersPlugin);
      this.markersPlugin.on("select-marker",(e,data)=>{
        this.selectMarker(e,data);
      } );
      this.viewer.on('click', (e, data) => {
        // 点击全景图事件
        const { target } = data
        // console.log('点击全景图')
        // console.log('e:', e)
        // console.log('data:', data)
        // console.log('target:', target)
        // console.log('target.parentNode:', target.parentNode)
        // console.log(target.parentNode.className)
        const targetClassName = target.className
        console.log('targetClassName:', targetClassName)
        if (typeof targetClassName === 'string') {
          // 附件为图片
          if (targetClassName.includes('imgToLeft')) {
            const scrollDom = this.$el.querySelector(
              '.marker-img-scroll-container'
            )
            scrollDom.scrollLeft -= 294
            return false
          }
          if (targetClassName.includes('imgToRight')) {
            const scrollDom = this.$el.querySelector(
              '.marker-img-scroll-container'
            )
            scrollDom.scrollLeft += 294

            return false
          }
          // 附件为视频
          if (targetClassName.includes('videoToLeft')) {
            const scrollDom = this.$el.querySelector(
              '.marker-video-scroll-container'
            )
            scrollDom.scrollLeft -= 294
            return false
          }
          if (targetClassName.includes('videoToRight')) {
            const scrollDom = this.$el.querySelector(
              '.marker-video-scroll-container'
            )
            scrollDom.scrollLeft += 294

            return false
          }
          if (targetClassName === 'play-btn') {
            console.log('新建一个窗口 播放视频')
            console.log('target.dataset:', target.dataset)
            window.open(target.dataset.src)
            return false
          }
        }

        if (
          target.parentNode.className === 'psv-tooltip-content'
          || target.parentNode.parentNode.className === 'psv-tooltip-content'
          || target.parentNode.parentNode.parentNode.className
          === 'psv-tooltip-content'
          || target.parentNode.parentNode.parentNode.parentNode.className
          === 'psv-tooltip-content'
        ) {
          // 这样标注的tooltip区域才能正常点击
          console.log('点击区域是marker-tooltip-container')

          return false
        }
        // 如果上次点击的未编辑保存 需要去掉
        //this.cancelEdit()

        this.isEditMarker = true
        // 重新赋值为默认值
        this.markersEditConfig = {
          marker: {
            status: 0, // 0 未发布 1已发布
            title: '', // 标题
            description: '', // 描述
            attachment: {
              type: 'img', // 附件的类型 img video link
              imgArr: [],
              videoArr: [], // 视频
              linkText: '', // 文字链接的文字
              link: '' // 链接地址
            }
          },
          jump: {
            angle: '0°',
            targetSceneId: '' // 目标场景id
          }
        }
        // 添加初始标注
        this.addMarker(e, data)
      })
    },
    selectMarker(e, marker) {
      // 选中标注 点击标注
      // console.log('选中标注 点击标注 select-marker e:', e)
      // console.log('marker:', marker)
      // 如果上次点击的未编辑保存 需要去掉
      //this.cancelEdit()
      this.currentMarkerId = marker.id
      this.isEditMarker = true
      // currentTabIndex 1: 添加标注 2:添加跳转
      const { config } = e.args[0]
      console.log('标注 config:', config)

      if (config.type === 'jump') {
        // console.log('选中的是添加跳转的标注')
        // 将对应标注数据更新
        this.currentTabIndex = '2'

        this.markersEditConfig.jump = {
          angle: config.angle,
          targetSceneId: config.targetSceneId // 目标场景id
        }
        // console.log('切换场景')
        // console.log('切换场景')
        // 编辑状态下 点击编辑  预览或者查看 点击才跳转
         this.setViewer(config.target)
      } else if (config.type === 'marker') {
        console.log('展示或者隐藏标注')
        // 将对应标注数据更新
        this.currentTabIndex = '1'
        this.markersEditConfig.marker.attachment = config.attachment || {}
        this.markersEditConfig.marker.title = config.title
        this.markersEditConfig.marker.description = config.description

        const visible = !!marker.config.tooltip.visible
        // 隐藏/展示tooltip内容
        const methods = visible ? 'hideTooltip' : 'showTooltip'
        // console.log('tooltipVisible:', visible)
        // console.log(
        //   'this.markersPlugin.markers[this.currentMarkerId]:',
        //   this.markersPlugin.markers[this.currentMarkerId]
        // )
        // 展示tooltip内容时 隐藏title 隐藏tooltip内容时 展示title
        this.markersPlugin.markers[
          this.currentMarkerId
        ].config.tooltip.visible = !visible
        this.markersPlugin.markers[this.currentMarkerId][methods]()
      }

      // console.log(
      //   'currentTabIndex 1: 添加标注 2:添加跳转  currentTabIndex:',
      //   this.currentTabIndex
      // )
    },
    addMarker(e, data) {

      // 添加初始标注 具体标注编辑后会更新
      // currentTabIndex 1: 添加标注 2:添加跳转
      if (this.currentTabIndex === '1') {
        // console.log('添加标注')
        const id = `marker${+new Date()}`
        const config = {
          id,
          html: `
            <div style="width: 10px;height: 10px;background-color: #00aeff;border-radius: 50px;">
            </div>
          `,
          //image:"https://photo-sphere-viewer-data.netlify.app/assets/pictos/pin-blue.png",
          longitude: data.longitude,
          latitude: data.latitude,
          anchor: 'center center',
          tooltip: {
            // tooltip with custom position
            content: `
              <div class="marker-tooltip-container">
                <p class="marker-title">
                  暂未输入标题
                </p>
                <p class="marker-description">
                  暂未输入描述
                </p>
              </div>
            `,
            position: 'center top'
          },
          visible: true, // 标注初始显示与否
          type: 'marker',
          status: 1,
          isInitialize: true,
          attachment: {
            type: 'img',
            imgArr: [],
            videoArr: []
          }
          // note: {
          //   type: 'marker', // 添加标注 or 添加跳转
          //   status: 1, // 0 未发布 1发布
          //   // target: '', // 要跳转的全景图
          //   // angle: '', // 角度
          //   // sceneName: '', // 要跳转的场景名称
          //   isInitialize: false // 是否是初始化的值 true表示是初始化 未完成编辑的标注 如果点了取消 需要删除  如果编辑完点了保存 值变为false
          // }
        }
        this.markersPlugin.addMarker(config)
        // 显示 tooltip
        this.markersPlugin.markers[id].showTooltip()

        // 隐藏 tooltip
        //   this.markersPlugin.markers[id].hideTooltip()
        this.currentMarkerId = id
      } else if (this.currentTabIndex === '2') {
        console.log('添加跳转')
        // console.log('添加跳转')
        const id = `jump${+new Date()}`
        const config = {
          id,
          html: `
          <div class="jump-container">
            <p class="jump-text">
              暂未选择目标场景
            </p>
            <img class="jump-arrow" src="https://api.boss.i-town.cn/Upload/img/3.png" style="width:50px;height:50px;border-radius:50px"></img>
          </div>
          `,
          longitude: data.longitude,
          latitude: data.latitude,
          anchor: 'center center',
          type: 'jump',
          target: '',
          angle: '',
          sceneName: '',
          isInitialize: true,
          attachment: {
            type: 'img',
            imgArr: [],
            videoArr: []
          }
          // note: {
          //   type: 'jump', // 添加标注 or 添加跳转
          //   target: '', // 要跳转的全景图
          //   angle: '', // 角度
          //   sceneName: '', // 要跳转的场景名称
          //   isInitialize: false // 是否是初始化的值 true表示是初始化 未完成编辑的标注 如果点了取消 需要删除  如果编辑完点了保存 值变为false
          // }
        }
        this.markersPlugin.addMarker(config)
        this.currentMarkerId = id
      }
    },
    async updateMarker() {
      // 将自定义编辑的内容 更新到对应标注上
      // currentTabIndex 1: 添加标注 2:添加跳转
      let config = {}
      const markerData = this.markersEditConfig.marker

      if (this.currentTabIndex === '1') {
        console.log('添加标注')
        if (!markerData.title) {
          this.$message.error('请填写标题')
          return false
        }

        const { title, description } = markerData
        let descriptionStyle = ''
        if (!description) descriptionStyle = 'display:none;'

        let attachment = '',
          content = ''
        switch (markerData.attachment.type) {
          case 'img': {
            const { length } = markerData.attachment.imgArr
            if (length > 0) {
              markerData.attachment.imgArr.forEach((src) => {
                attachment += `<img src=${src} />`
              })
              attachment = `
              <div class="scroll-container marker-img-scroll-container ">${attachment}</div>
          `
              // 左右箭头
              if (length > 1) attachment += `<img class="btn toLeft imgToLeft" src=${toLeft}>
              <img class="btn toRight imgToRight" src=${toRight}>`
              attachment = `<div class="marker-img-continaer">
                  ${attachment}
                </div>`
            }

            content = `
              <div class="marker-tooltip-container">
                  ${attachment}
                <p class="marker-title">
                  ${title}
                </p>
                <p class="marker-description" style=${descriptionStyle}>
                  ${description}
                </p>
              </div>
            `

            break
          }
          case 'video': {
            const { length } = markerData.attachment.videoArr
            if (length > 0) {
              markerData.attachment.videoArr.forEach((src) => {
                attachment += `
              <div>
                <video src=${src}></video>
                <img class="play-btn" data-src="${src}" src="https://aupup-mall-pub.oss-cn-shenzhen.aliyuncs.com/public/f1a83148-a573-4e46-a1c0-4c6db6752d81.png" />
              </div>
            `
              })
              attachment = `
            <div class="scroll-container marker-video-scroll-container">
                    ${attachment}
            </div>`
              //  左右箭头
              if (length > 1) attachment += `<img class="btn toLeft videoToLeft" src=${toLeft}>
              <img class="btn toRight videoToRight" src=${toRight}>
            `
              attachment = `<div class="marker-video-continaer">
                ${attachment}
                </div>  `
            }

            content = `
              <div class="marker-tooltip-container">
                ${attachment}
                <p class="marker-title">
                  ${title}
                </p>
                <p class="marker-description" style=${descriptionStyle}>
                  ${description}
                </p>
              </div>
            `
            break
          }
          case 'link':
            // link跳转地址如果不带协议 需要补充上
            if (!markerData.attachment.link.includes('http')) markerData.attachment.link = `https://${markerData.attachment.link}`
            attachment = `<a href="${markerData.attachment.link}" target="_blank">${markerData.attachment.linkText} ><span class="arrow">></span></span></a>`
            content = `
              <div class="marker-tooltip-container">
                <p class="marker-title">
                  ${title}
                </p>
                <p class="marker-description" style=${descriptionStyle}>
                  ${description}
                </p>
                <div class="marker-link-container">
                  ${attachment}
                </div>
              </div>
            `
            break
          default:
            console.log('default')
        }
        // console.log('content:', content)
        config = {
          id: this.currentMarkerId,
          html: `
            <div style="width: 10px;height: 10px;background-color:#229922;border-radius: 50px;" ">
            </div>
          `,
          // longitude: data.longitude,
          // latitude: data.latitude,
          anchor: 'center center',
          tooltip: {
            // tooltip with custom position
            content,
            position: 'center top'
          },
          visible: true, // 标注初始显示与否
          isInitialize: false
          // note: {
          //   type: 'marker', // 添加标注 or 添加跳转
          //   status: 0, // 0 未发布 1发布
          //   isInitialize: true // 是否是初始化的值 true表示是初始化 未完成编辑的标注 如果点了取消 需要删除  如果编辑完点了保存 值变为false
          // }
        }
        this.markersPlugin.updateMarker(config)
        // 显示tooltip
        this.markersPlugin.markers[this.currentMarkerId].showTooltip()
      } else if (this.currentTabIndex === '2') {
        console.log('修改跳转')
        const { targetSceneId, angle } = this.markersEditConfig.jump
        console.log('targetSceneId',targetSceneId)
        if (!targetSceneId) {
          this.$message.error('请选择跳转的场景')
          return false
        }
        const jumpConfig = this.itemArr.find(
          (item) => item.id === targetSceneId
        )
        console.log('jumpConfig:', jumpConfig)
        config = {
          id: this.currentMarkerId,
          html: `
          <div class="jump-container">
            <p class="jump-text">
              ${jumpConfig.name}
            </p>
            <img class="jump-arrow" style="transform:rotate(${this.angle}deg);width:50px;height:50px;border-radius:50px" src="${jumpConfig.img}" ></img>
          </div>
          `,
          type:"jump",
          isInitialize: false,
          target: jumpConfig.img, // 要跳转的全景图
          isInitialize: true,
          sceneId: targetSceneId ,
          angle:this.angle
          // note: {
          //   type: 'jump', // 添加标注 or 添加跳转
          //   target: jumpConfig.img, // 要跳转的全景图
          //   angle, // 角度
          //   sceneName: jumpConfig.sceneName, // 要跳转的场景名称
          //   isInitialize: true, // 是否是初始化的值 true表示是初始化 未完成编辑的标注 如果点了取消 需要删除  如果编辑完点了保存 值变为false
          //   sceneId: targetSceneId // 跳转场景id
          // }
        }

        this.markersPlugin.updateMarker(config)
      }
      config = {
        ...this.markersPlugin.markers[this.currentMarkerId].config,
        ...config
      }
      config.imageId = this.sceneArr[this.currentSceneIndex].id
      // 新增标注
      // 调整参数
      config.type = this.currentTabIndex === 1 ? 'marker' : 'jump'
      if (config.type === 'marker') {
        config.title = markerData.title
        config.description = markerData.description
        config.attachment = markerData.attachment
      } else if (config.type === 'jump') {
        config.angle = this.markersEditConfig.jump.angle
        config.targetSceneId = this.markersEditConfig.jump.targetSceneId
      }
      console.log('调整后的config:', config)
      // id为number类型 更新 否则 新增
      let res
      if (typeof config.id === 'number') res = await this.$api.updateMarker(config)
      else res = await this.$api.addMarker(config)
      if (res.success) {
        // console.log('config.id:', config.id)
        this.markersPlugin.removeMarker(config.id)
        this.isEditMarker = false
        this.$nextTick(() => {
          this.initMarkers()
        })
      }
    },
    //开场加载动画
    //  loadAnimate() {
    //   this.loadshow=true
    //             $("#load-bar-x").width('0%');
    //             $("#load-bar-k").animate({
    //                 height: '3px',
    //             }, 300);
    //             $("#load-bar-x").animate({
    //                 width: '99%',
    //             }, 15000);
    // },
    // //关闭开场动画
    // closeLoadAnimate() {
    //     $("#load-bar-x").stop();
    //     $("#load-bar-x").animate({
    //         width: '100%',
    //     }, 1000);
    //     setTimeout('$("#load").hide()', 1500);
    // },

    //切换体感
    //  switchGyro() {
    //     if (controllerLock) {
    //         this.switchGyroStatus = !this.switchGyroStatus;
    //         //tpano.re.switchGyro(switchGyroStatus);
    //         switchGyroPoint();
    //     }
    // },
    //切换照片功能展开按钮
    switchPhoto() {
      if (this.controllerLock && this.photoBoxLock) {
        this.switchPhotoStatus = !this.switchPhotoStatus;
        let photoBoxHeight;
        if (document.documentElement.clientWidth < 1000) {
          photoBoxHeight = '160px';
        } else {
          photoBoxHeight = '177px';
        }
        if (this.switchPhotoStatus) {
          this.$refs.photobox.style.display = 'flex';
          //this.$refs.photobox.style.height= photoBoxHeight;
          //this.$refs.photobox.style.opacity= 1;
          this.$refs.photobox.animate({
            opacity: 1,
            height: photoBoxHeight
          }, 800);
          setTimeout(() => {
            this.$refs.photobox.style.opacity = 1;
            this.$refs.photobox.style.height = photoBoxHeight;
          }, 800);
          // $("#photo-box").css('display', 'flex');
          // $("#photo-box").animate({
          //     opacity: 1,
          //     height: photoBoxHeight
          // }, 800);
          // this.$refs.photobox.style.opacity= 1;
          // this.$refs.photobox.style.height= photoBoxHeight;
        } else {
          this.$refs.photobox.animate({
            opacity: 0,
            height: photoBoxHeight
          }, 800);
          setTimeout(() => {
            this.$refs.photobox.style.opacity = 0;
            this.$refs.photobox.style.height = 0;
          }, 800);
          // document.querySelector(".photo-box-p").animate({
          //     opacity: 0
          // });
          // setTimeout(() => {
          //     this.$refs.photobox.animate({
          //         opacity: 0,
          //         height: '0'
          //     }, 800);
          // }, 200);
          // setTimeout(() => {
          //   this.$refs.photobox.style.display='none';
          // }, 1000);
        }
        this.switchPhotoPoint();
      } else {
        alert('相册还未加载完毕，请稍后再试。');
      }
    },
    switchPhotoPoint() {
      if (this.switchPhotoStatus) {
        this.pointshow = false;
      } else {
        this.pointshow = true;
      }
    },
    //创建全景照片相册
    cratePhoneBox() {
      document.querySelector("#photo-box-d").innerHTML = ""
      for (let i = 0; i < this.itemArr.length; i++) {
        if (this.itemArr[i].type == 'VIDEO') {
          //onclick = "tpano.re.switchPhoto(' + (i + 1) + ')"
          document.querySelector("#photo-box-d").innerHTML += '<div id="phonebox' + (i + 1) + '"  class="photo-box-div"><img class="photo-box-img" src="./video.png" alt="第' + (i + 1) + '段视频"><p class="photo-box-p">' + this.itemArr[i].name + '</p></div>';
        } else {
          //onclick = "tpano.re.switchPhoto(' + (i + 1) + ')"
          document.querySelector("#photo-box-d").innerHTML += '<div id="phonebox' + (i + 1) + '"  class="photo-box-div" style="margin: 0 4px;position: relative;"><img class="photo-box-img" onclick="setViewers(\'' + this.itemArr[i].img + '\')" src="' + this.itemArr[i].img + '" alt="第' + (i + 1) + '张照片" style="width:200px;height:120px;background-color: #ffffffcc;" /><p class="photo-box-p" style="position: absolute;left: 10px;bottom: 10%;text-align: center;color: #ffffff;border-radius:5px; padding: 4px;background-color: rgba(20, 20, 20, 0.4);opacity: 1;" ref="photoboxp">' + this.itemArr[i].name + '</p></div>';
        }
      }
    },
    //隐藏功能键
    hidefunction() {
      hidefunctionStatus = !hidefunctionStatus;
      if (hidefunctionStatus) {
        $(".item-f").animate({
          opacity: '0'
        });
        setTimeout(() => {
          $("#controller-y").animate({
            height: '42px'
          }, 200);
          $(".item-f").hide();
        }, 400);
      } else {
        $("#controller-y").animate({
          height: '128px'
        }, 200);
        setTimeout(() => {
          $(".item-f").show();
        }, 200);
        setTimeout(() => {
          $(".item-f").animate({
            opacity: '1'
          });
        }, 400);
      }
    }
  },
};
</script>

<style  scoped>
.Addjump>>>.ivu-upload {
  background-color: #1c2029;
  margin-top: 20px;
  border: none;
  
}

.Addjumpbig {
  background-color: #1c2029;
  border-radius: 80px;
  display: flex;
  text-align: center;
  font-size: 15px;
  height: 30px;
  line-height: 30px;
}
.chi-div {
  flex: 1;
}
.Addjumpbig>>>.ivu-btn {
  background-color: #1c2029;
  border: none;

}

.Addjumpbig>>>.ivu-btn-primaryn.is-active,
.Addjumpbig>>>.ivu-btn-primary:active {
  background-color: rgb(230, 162, 60);
  border-color: rgb(230, 162, 60);
  color: #fff;

}

.Addjump>>>.ivu-input {
  background-color: #1c2029;
  border: none;
  color: #ffffff;
}

.Addjump>>>.ivu-select-selection {
  background-color: #1c2029;
  border: none;
  color: white;
  /*background-color: red; */
}

.Addjump>>>.ivu-select-dropdown {
  background-color: #1c2029;
  border: none;
  color: white;
}

.Addjump>>>.ivu-select-visible .ivu-select-selectionr {
  border-color: black;
}

.Addjump>>>.ivu-select-item{
  color: #fff;
}
.Addjump>>>.ivu-select-item:active{
  background-color: #00aeff;
}
.Addjump>>>.ivu-select-item:hover{
  background-color: #03f3b7;
}
.Addjump>>>.ivu-select-item-selected{
  background-color: #00aeff;
}
.Addjump>>>.ivu-radio .ivu-radio-inner {
  background-color: #1c2029;
}

.Addjump>>>.ivu-radio-wrapper {
  color: white;
}

.lables {
  font-size: 18px;
  color: white;
  margin-top: 15px;
}

.lablesInput {
  font-size: 18px;
  color: white;
  margin-bottom: 15px;
  margin-top: 10px;

}

.lablesInputWZ {

  margin-top: 490px;
}

.lablesInputWZone {
  margin-top: 290px;

}


#viewer {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  overflow: hidden;
}

#load {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(46, 46, 46, 0.5);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#load-bar-k {
  width: 40%;
  height: 1px;
  background-color: #555555;
}

#load-bar-x {
  height: 3px;
  width: 0%;
  background-color: #ffffff;
}

#controller-y {
  z-index: 100000;
  position: absolute;
  bottom: 206px;
  right: 16px;
  display: flex;
  flex-direction: column;
  background-color: rgba(20, 20, 20, 0.4);
  border-radius: 50px;
  padding: 2px;
  overflow: hidden;
  width: 42px;
  height: 128px
}

#main {
  z-index: 100000;
  position: absolute;
  left: 20px;
  display: flex;
  flex-direction: column;
  background-color: rgba(44, 49, 68, 0.9);
  border-radius: 10px;
  padding: 2px;
  overflow: hidden;
  width: 320px;
  height: 80%;
}

.item {
  background-color: #ffffff;
  border-radius: 50px;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 6px;
  margin: 3.2px;
  position: relative;
}

.item>img {
  width: 100%;
  height: 100%;
}

.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #00aeff;
  border-radius: 50px;
  right: 0;
  bottom: -2px;
}

#photo-box {
  position: absolute;
  width: 100vw;
  padding: 8px 10px;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  height: 0;
  overflow-y: hidden;
  z-index: 100000;
}

#photo-box>div {
  background-color: rgba(20, 20, 20, 0.4);
  border-radius: 5px;
  display: flex;
  overflow-x: scroll;
  padding: 12px 18px;
  width: 100%;
  position: relative;
  overflow-y: hidden;
}

.photo-box-div {
  margin: 0 20px;
  position: relative;
}

.photo-box-div:nth-last-child(1) {
  padding-right: 18px;
}

.photo-box-img {
  width: 200px;
  height: 120px;
  background-color: #ffffffcc;
}

.photo-box-p {
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
  width: 200px;
  color: #ffffff;
  padding: 2px 0;
  background-color: rgba(20, 20, 20, 0.4);
  opacity: 0;
}

.item-s {
  position: absolute;
  bottom: 2px;
}
.maindiv{
  position: absolute;
  right: 20px;
  display: flex;
  bottom: 20px;
}
</style>

<style>
/*导航条下方边框*/
.main .el-tabs__nav-scroll {
  border-bottom: 0.5px solid #000000;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

/* 导航条下方边框阴影*/
.main .el-tabs__nav-wrap {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.el-tabs__item {
  color: white;
}

.el-tabs__item:hover {
  color: orange;
}

.el-tabs__item.is-active {
  color: orange;
}

.main .el-tabs__active-bar {
  background-color: #229922 !important;
}

#tab-first,
#tab-video,
#tab-courseWare,
#tab-testPaper {
  background-color: #fff;
  font-weight: 550;
  font-size: 20px;
  opacity: 1;
  box-shadow: 0 0 0 0;
}

#tab-first,
#tab-video,
#tab-courseWare,
#tab-testPaper {
  flex: 1;
  height: 60px;
  padding: 0 20px;
  font-size: 24px;
  line-height: 60px;
  color: rgba(51, 51, 51, 0.8);
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 1) !important;
  border-left: 1px solid rgba(255, 255, 255, 1) !important;
  box-shadow: 0px 2px 12px 0px rgba(45, 88, 0, 0.1);
  opacity: 0.51;
}

#tab-first {
  border-left: 0;
}

#tab-testPaper {
  border-right: 0;
}


/*   #tab-first:hover,
    #tab-video:hover,
    #tab-courseWare:hover,
    #tab-testPaper:hover {
     flex: 1.3;
    font-size: 23px;
     font-weight: 500;
     color: rgba(51, 51, 51, 1);
   } */
.box{
  height: 80%;
}
.box>div:first-child>div>div>div>div:first-child {
  /*flex: 1;*/
  height: 4px;
  margin: 0 auto;
  background: #84a0ea;
  box-shadow: 0 -1px 8px 0 rgba(100, 137, 237, 0.14);
}

.modal_footer {
  margin: 0;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>